K-Scaffold

Appearance

Premade Layouts ​

action-label

Similar to the construction created by button-label, except that it specifcally creates an action button as per action.

  • inputObj - object -

    An object describing the input to be paired with the button. This is the same object that you would pass to input.

  • buttonObj - object -

    An object describing the button to be paired with the input. This is the same object that you would pass to button.

  • divObj - object -

    An object describing the container div. Similar to the first two objects, but will most likely only have a class property if it is passed at all.

Example ​

pug
include k-scaffold
+roller-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

include k-scaffold
+roller-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button class="roller" name="roll_strength_roll" type="roll" value="@{strength_action}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>
<button name="act_strength-action" hidden="" type="action"></button>
<input name="attr_strength_action" type="hidden" title="@{strength_action}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button class="roller" name="roll_strength_roll" type="roll" value="@{strength_action}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>
<button name="act_strength-action" hidden="" type="action"></button>
<input name="attr_strength_action" type="hidden" title="@{strength_action}"/>

button-label

A mixin to create a combined button and input that are within the same container. Similar to input-label, but does not use a label.

  • inputObj - object -

    An object describing the input to be paired with the button. This is the same object that you would pass to input.

  • buttonObj - object -

    An object describing the button to be paired with the input. This is the same object that you would pass to button.

  • divObj - object -

    An object describing the container div. Similar to the first two objects, but will most likely only have a class property if it is passed at all.

Example ​

pug
include k-scaffold
+button-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

include k-scaffold
+button-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button name="roll_strength_roll" type="roll" value="/r 1d20+@{strength}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button name="roll_strength_roll" type="roll" value="/r 1d20+@{strength}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>

fillLeft

A mixin that creates an html construction ready to be styled for use as a fill-to-left section.

  • radioObj - object -

    The object containing the details of the radio input to create. Similar to the radio, but the value property passed is used as the default checked value.

  • divObj - object -

    Optional object containing any details of the div to be applied such as class, id, or other properties. Class and ID can also be supplied by attaching them to the mixin invocation just like with a regular div.

  • valueArray - array -

    Array containing the values to be used for the fill to left construction. These should be in the order that they should be displayed left to right.

  • noClear - boolean -

    Optional argument that tells the mixin whether or not to apply the fill-left__radio--clearer class to the first radio button value. If falsy (or not passed), the class is applied. If truthy, the class is not applied.

Example ​

pug
include k-scaffold
+fillLeft({
  radioObj:{name:'my radio'},
  divObj:{class:'some-custom-class'},
  valueArray:[1,2,3,4,5]
})

include k-scaffold
+fillLeft({
  radioObj:{name:'my radio'},
  divObj:{class:'some-custom-class'},
  valueArray:[1,2,3,4,5]
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="fill-left some-custom-class">
  <input class="fill-left__radio" name="attr_my_radio" value="0" type="hidden" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="1" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="2" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="3" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="4" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="5" type="checkbox" title="@{my_radio}"/>
</div>
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="fill-left some-custom-class">
  <input class="fill-left__radio" name="attr_my_radio" value="0" type="hidden" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="1" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="2" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="3" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="4" type="checkbox" title="@{my_radio}"/>
  <input class="fill-left__radio" name="attr_my_radio" value="5" type="checkbox" title="@{my_radio}"/>
</div>

headedTextarea

Creates a construction for pairing a header with a textarea. Currently is locked to creating an h3. This mixin also accepts classes and IDs appended directly to it (see the second example)

  • textObj - object -

    The object describing the textarea as per textarea

  • header - string -

    The data-i18n translation key to use for the header

Example ​

pug
include k-scaffold
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'})
//With class appended to the mixin itself
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'}).character-description

include k-scaffold
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'})
//With class appended to the mixin itself
+headedTextarea({textObj:{name:'character description','data-i18n-placeholder':'The description of your character'},header:'description'}).character-description

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="headed-textarea">
  <h3 class="headed-textarea__header" data-i18n="description"></h3>
    <textarea class="headed-textarea__textarea" name="attr_character_description" data-i18n-placeholder="The description of your character" title="@{character_description}"></textarea>
  </div>
  <!--With class appended to the mixin itself-->
  <div class="headed-textarea character-description">
    <h3 class="headed-textarea__header" data-i18n="description"></h3>
      <textarea class="headed-textarea__textarea" name="attr_character_description" data-i18n-placeholder="The description of your character" title="@{character_description}"></textarea>
    </div>
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="headed-textarea">
  <h3 class="headed-textarea__header" data-i18n="description"></h3>
    <textarea class="headed-textarea__textarea" name="attr_character_description" data-i18n-placeholder="The description of your character" title="@{character_description}"></textarea>
  </div>
  <!--With class appended to the mixin itself-->
  <div class="headed-textarea character-description">
    <h3 class="headed-textarea__header" data-i18n="description"></h3>
      <textarea class="headed-textarea__textarea" name="attr_character_description" data-i18n-placeholder="The description of your character" title="@{character_description}"></textarea>
    </div>

input-label

null
  • label - string -

    The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key

  • inputObj - object -

    An object describing the input to be paired with the button. This is the same object that you would pass to input.

  • divObj - object -

    An object describing the container label. Similar to the inputObj, but will most likely only have a class property if it is passed at all.

  • spanObj - object -

    An object describing the span to be paired with the input. This is the same object that you would pass to span.

Example ​

pug
include k-scaffold
+input-label({
  label:'strength',
  inputObj:{name:'strength',type:'number'},
  divObj:{class:'div-class'},
  spanObj:{class:'span-class'}
})

include k-scaffold
+input-label({
  label:'strength',
  inputObj:{name:'strength',type:'number'},
  divObj:{class:'div-class'},
  spanObj:{class:'span-class'}
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<label class="input-label div-class">
  <span class="span-class input-label__text" data-i18n="strength"></span>
  <input class="input-label__input" name="attr_strength" type="number" title="@{strength}"/>
</label>
<button name="act_k-network-call" hidden="" type="action"></button>
<label class="input-label div-class">
  <span class="span-class input-label__text" data-i18n="strength"></span>
  <input class="input-label__input" name="attr_strength" type="number" title="@{strength}"/>
</label>

roller-label

Similar to the construction created by button-label, except that it creates a roller construction instead of just a straight button.

  • inputObj - object -

    An object describing the input to be paired with the button. This is the same object that you would pass to input.

  • buttonObj - object -

    An object describing the button to be paired with the input. This is the same object that you would pass to button.

  • divObj - object -

    An object describing the container div. Similar to the first two objects, but will most likely only have a class property if it is passed at all.

Example ​

pug
include k-scaffold
+roller-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

include k-scaffold
+roller-label({
  inputObj:{name:'strength',type:'number',class:'underlined',value:10,trigger:{affects:['athletics']}},
  buttonObj:{name:'strength_roll',type:'roll',value:'/r 1d20+@{strength}'},
  divObj:{class:'strength'}
})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button class="roller" name="roll_strength_roll" type="roll" value="@{strength_action}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>
<button name="act_strength-action" hidden="" type="action"></button>
<input name="attr_strength_action" type="hidden" title="@{strength_action}"/>
<button name="act_k-network-call" hidden="" type="action"></button>
<div class="input-label input-label--button strength">
  <button class="roller" name="roll_strength_roll" type="roll" value="@{strength_action}"></button>
  <input class="underlined input-label__input" name="attr_strength" type="number" value="10" title="@{strength}"/>
</div>
<button name="act_strength-action" hidden="" type="action"></button>
<input name="attr_strength_action" type="hidden" title="@{strength_action}"/>

select-label

Similar to the construction created by input-label, except that the input is replaced with a select.

  • label - string -

    The translation key to use for the span. If not passed, then the spanObj must be passed with a translation key

  • inputObj - object -

    An object describing the select to be paired with the button. This is the same object that you would pass to select.

  • divObj - object -

    An object describing the container label. Similar to the inputObj, but will most likely only have a class property if it is passed at all.

  • spanObj - object -

    An object describing the span to be paired with the input. This is the same object that you would pass to span.

  • block - block -

    The mixin uses the pug block as the content of the select.

Example ​

pug
include k-scaffold
+select-label({
  label:'Whisper to GM',
  inputObj:{name:'whisper'},
  divObj:{class:'div-class'},
  spanObj:{class:'span-class'}
})
  +option({value:'','data-i18n':'never',selected:''})
  +option({value:'/w gm ','data-i18n':'always'})

include k-scaffold
+select-label({
  label:'Whisper to GM',
  inputObj:{name:'whisper'},
  divObj:{class:'div-class'},
  spanObj:{class:'span-class'}
})
  +option({value:'','data-i18n':'never',selected:''})
  +option({value:'/w gm ','data-i18n':'always'})

Output ​

html
<button name="act_k-network-call" hidden="" type="action"></button>
<label class="input-label div-class">
  <span class="span-class input-label__text" data-i18n="Whisper to GM"></span>
  <select class="input-label__input" name="attr_whisper" title="@{whisper}">
    <option value="" data-i18n="never" selected=""></option>
    <option value="/w gm " data-i18n="always"></option>
  </select>
</label>
<button name="act_k-network-call" hidden="" type="action"></button>
<label class="input-label div-class">
  <span class="span-class input-label__text" data-i18n="Whisper to GM"></span>
  <select class="input-label__input" name="attr_whisper" title="@{whisper}">
    <option value="" data-i18n="never" selected=""></option>
    <option value="/w gm " data-i18n="always"></option>
  </select>
</label>

Released under the MIT License

Copyright ©2023 Scott Casey